import {
  _renderFont,
  _renderRect,
  _renderBaseRect,
  _renderComplexRect,
  getImage,
  drawRect,
  drawFont,
  scaleStrokeFun,
  _renderFillStyle,
  _renderStrokeStyle,
  _renderLine,
  _renderFill,
} from './shareCanvas/index'

export type canvasFileType =
  | 'image/png'
  | 'image/jpeg'
  | 'image/gif'
  | 'image/webp'
  | 'image/x-icon'
// 导出并下载图片
export function downloadCanvasIamge(
  name: string,
  type: canvasFileType = 'image/png',
  canvas: any
) {
  // 使用toDataURL方法将图像转换被base64编码的URL字符串
  let url = canvas.toDataURL(type)
  // 生成一个a元素
  let a = document.createElement('a')
  // 创建一个单击事件
  let event = new MouseEvent('click')
  // 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
  a.download = name || '下载图片名称'
  // 将生成的URL设置为a.href属性
  a.href = url

  // 触发a的单击事件
  a.dispatchEvent(event)
}
export type utf_8FileType =
  | 'data:text/plan'
  | 'data:text/html'
  | 'data:text/css'
  | 'data:text/javascript'
  | 'data:application/json'

// 导出并下载文件
export function downloadDataText(
  filename: string,
  type: utf_8FileType = 'data:text/plan',
  text: any
) {
  let a = document.createElement('a')
  // 创建一个单击事件
  let event = new MouseEvent('click')

  a.download = filename || '下载文件名称'

  a.href = `${type};charset=utf-8,${encodeURIComponent(text)}`

  // 触发a的单击事件
  a.dispatchEvent(event)
}
export function downloadPage(filename: string, type: any, data: any) {
  let file = ''

  let a = document.createElement('a')
  // 创建一个单击事件
  let event = new MouseEvent('click')
  filename = filename || '下载文件名称'
  if (type == 'data:text/html') {
    file = loadHtml(data)
    console.log(file, 'file')

    a.download = filename
  } else if (type == 'data:text/vue') {
    file = loadVue3(data)
    console.log(file, 'file')

    a.download = filename + '.vue'
  }

  a.href = `${type};charset=utf-8,${encodeURIComponent(file)}`
  // 触发a的单击事件
  a.dispatchEvent(event)
}
function loadVue3(data: any) {
  let fileScript: any = ''
  fileScript += _renderFill
  fileScript += _renderFillStyle
  fileScript += _renderStrokeStyle
  fileScript += _renderLine
  fileScript += scaleStrokeFun
  fileScript += getImage

  let drawListFun = ''
  data.styleDataList.forEach((item: any) => {
    if (item.type == 'Rect') {
      drawListFun += `
      drawRect(ctx.value, ${JSON.stringify(item)})
      `
      fileScript = drawRect + fileScript
      fileScript = _renderRect + fileScript
    }
  })

  let file = `
    <template>
    <div class="cavas_box">
        <canvas id="canvasDom" ref="canvasDom" width="${data.canvasWidth}" height="${data.canvasHeight}"></canvas>
    </div>
    </template>
    <script setup lang="ts">
    import { onMounted,ref } from 'vue'
      const canvasDom = ref()
      const ctx = ref()
      onMounted(() => {
        if (canvasDom.value) {
         ctx.value = canvasDom.value.getContext('2d')
        }
        drawCanvas()
      })
      async function drawCanvas() {
        ${drawListFun}
      }
      ${fileScript}
    </script>
    <style>
    body {
      background-color: #dedede;
      margin: 0;
    }
    .cavas_box {
      padding-top: 50px;
      display: flex;
      justify-content: center;
    }
    #canvasDom {
      width: ${data.canvasWidth}px;
      height: ${data.canvasHeight}px;
    }
  </style>`
  return file
}

function loadHtml(data: any) {
  let fileScript: any = ''
  fileScript += _renderFill
  fileScript += _renderFillStyle
  fileScript += _renderStrokeStyle
  fileScript += _renderLine
  fileScript += scaleStrokeFun
  fileScript += getImage

  let drawListFun = ''
  data.styleDataList.forEach((item: any) => {
    if (item.type == 'Rect') {
      drawListFun += `
    await drawRect(ctx, ${JSON.stringify(item)})
      `
      if (!fileScript.includes('drawRect')) {
        fileScript = _renderBaseRect + fileScript
        fileScript = _renderComplexRect + fileScript
        fileScript = drawRect + fileScript
        fileScript = _renderRect + fileScript
      }
    } else if (item.type == 'Font') {
      drawListFun += `
      await drawFont(ctx, ${JSON.stringify(item)})
      `
      if (!fileScript.includes('drawFont')) {
        fileScript = drawFont + fileScript
        fileScript = _renderFont + fileScript
      }
    }
  })

  let file = `
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
      </head>
      <body>
        <div class="cavas_box">
          <canvas id="canvasDom" width="${data.canvasWidth}" height="${data.canvasHeight}"></canvas>
        </div>
        <script>
        let canvasDom = null
        let ctx = null
        getContent()
        drawCanvas()
        function getContent () {
          canvasDom = document.getElementById('canvasDom')
          ctx = canvasDom.getContext('2d')
        }
        async function drawCanvas () {
          ${drawListFun}
        }
        ${fileScript}
      </script>
      <style>
        body {
          background-color: #dedede;
          margin: 0;
        }
        .cavas_box {
          padding-top: 50px;
          display: flex;
          justify-content: center;
        }
        #canvasDom {
          width: ${data.canvasWidth}px;
          height: ${data.canvasHeight}px;
        }
      </style>
    </body>
  </html>`
  return file
}
